.top-menu{ //change app
    .el-dropdown-menu__item{
      margin-bottom: 1px;
      & > a{
        display: block;
        text-align: center;
        padding-top: 5px;
        .svg-icon{ font-size:22px;}
        p{ margin:0;}
      }
      &.active{background-color:$--bg-primary; color:$--color-primary;}
    }
}
.top-theme{ //change theme
    .el-dropdown-menu__item{
      margin-bottom: 1px;
      &.active{background-color:$--bg-primary; color:$--color-primary;}
    }
    .top-theme-wraper{
      display:flex; align-items:center; padding:15px;
      border-bottom:1px solid $--border-color-lighter;
      .top-theme-left{
        display: inline-block;
        text-align: center;
        margin-right: 15px;
        .top-theme-name { padding-top: 4px;}
        .top-theme-default{ width:64px; height:42px; background-image: url('../../assets/images/theme-default.png'); background-size: cover; }
        .top-theme-purple{ width:64px; height:42px; background-image: url('../../assets/images/theme-purple.png'); background-size: cover; }
      }
    }
}
.navbar {
    height: 50px;
    overflow: hidden;
    position: relative;
    background-color: $primary;
    background: -webkit-gradient(linear,left top,right top,from($primary),to($navBarGradienTo));
    background: linear-gradient(90deg,$primary,$navBarGradienTo);
    // box-shadow: 0 1px 4px rgba(0,21,41,.08);

    .hamburger-container { // expand icon
      line-height: 46px;
      height: 100%;
      float: left;
      cursor: pointer;
      transition: background .3s;
      -webkit-tap-highlight-color:transparent;

      &:hover {
        background: rgba(0, 0, 0, .025)
      }
      .hamburger {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        fill: #fff;
      }

      .hamburger.is-active {
        transform: rotate(180deg);
      }
    }

    .breadcrumb-container { //bread crumb
      float: left;
    }
    .app-breadcrumb.el-breadcrumb { //bread crumb
        display: inline-block;
        font-size: 14px;
        line-height: 50px;
        margin-left: 8px;
        .el-breadcrumb__separator{ color:$primaryText;}
        .el-breadcrumb__inner.is-link, .el-breadcrumb__inner a{color:$primaryText;}
        .el-breadcrumb__inner.is-link:hover, .el-breadcrumb__inner a:hover{ color:$primaryText;}
        .no-redirect {
          color:$primaryText;
          cursor: text;
        }
    }
    .errLog-container {
      display: inline-block;
      vertical-align: top;
    }
    .right-menu {
      float: right;
      height: 100%;
      line-height: 50px;

      &:focus {
        outline: none;
      }

      .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        //vertical-align: text-bottom;
        color:$white;
        vertical-align: top;
        &.hover-effect {
          cursor: pointer;
          transition: background .3s;

          &:hover {
            background: rgba(0, 0, 0, .025)
          }
        }
      }
      .change-theme .el-dropdown{ //theme icon
        color:$white;
        font-size:18px;
      }
      .avatar-container { //user icon
        margin-right: 15px;
        .avatar-wrapper {
          position: relative;
          display: flex;
          align-items: center;
          height:100%;
          & > span{ font-size:14px; padding:0 5px;}
          .svg-icon{ font-size:26px;}
          // .user-avatar {
          //   cursor: pointer;
          //   width: 40px;
          //   height: 40px;
          //   border-radius: 10px;
          // }

          .el-icon-caret-bottom {
            cursor: pointer;
            // position: absolute;
            // right: -20px;
            // top: 25px;
            font-size: 12px;
          }
        }
      }

      .header-search { //search icon
        font-size: 0 !important;

        .search-icon {
          cursor: pointer;
          font-size: 18px;
          vertical-align: middle;
        }

        .header-search-select {
          font-size: 18px;
          transition: width 0.2s;
          width: 0;
          overflow: hidden;
          background: transparent;
          border-radius: 0;
          display: inline-block;
          vertical-align: middle;

          /deep/ .el-input__inner {
            border-radius: 0;
            border: 0;
            padding-left: 0;
            padding-right: 0;
            box-shadow: none !important;
            vertical-align: middle;
            background-color: rgba(209,209,240,0.2);
            border-radius: 4px;
            padding:4px;
            color:$white;
          }
        }

        &.show {
          .header-search-select {
            width: 210px;
            margin-left: 10px;
          }
        }
      }
    }
}
